<template>
  <div class="scoreSearch" :style="{'min-height':wHeight+'px'}">
    <div class="searchHeader">
      <div class="searchCircle">          
        <div class="searchIcon">
          <img src="http://mobuz-mp.cdn.bcebos.com/matter/search_02@2x.png">
        </div>
        <div class="searchInput">
          <input type="text" placeholder-class="inputPlaceholder" placeholder="搜索歌曲名或者演唱者" maxlength="-1"
          cursor-spacing="10" v-model="searchText" @confirm="searchDefiniteScore" >
        </div>
        <div class="searchEmpty" v-if="searchText" @click.stop.prevent="emptyInputOperate">
          <img src="http://mobuz-mp.cdn.bcebos.com/matter/close_02@2x.png">
        </div>
      </div>
    </div>

    <div class="searchPrompt" v-if="searchStatus === 0">
      <div class="hotsSearch">
        <div class="promptTitle">热门搜索</div>
        <div class="promptList">
          <div class="promptCell" v-for="(item, index) in hotsData" :key="index" @click.stop.prevent="selectPromptOperate(item)">{{item}}</div>
        </div>
      </div>
      <div class="historySearch">
        <div class="promptTitle">历史搜索</div>
        <div class="promptEmpty" @click.stop.prevent="emptyHistoryOperate">
          <img src="http://mobuz-mp.cdn.bcebos.com/matter/delete@2x.png">
        </div>
        <div class="promptList" v-if="historyData.length !== 0">
          <div class="promptCell" v-for="(item, index) in historyData" :key="index" @click.stop.prevent="selectPromptOperate(item)">{{item}}</div>
        </div>
        <div class="promptNone" v-if="historyData.length === 0">暂无历史搜索</div>
      </div>
    </div>

    <div class="searchResult" v-if="searchText && searchStatus !== 0">
      <div class="resultList" v-if="scoreData.length !== 0">
        <div class="resultCell" v-for="(item, index) in scoreData" :key="index" @click.stop.prevent="goToScoreDetails(item)">
          <div class="cellImage">
             <img :src="item.SINGER_IMG ? item.SINGER_IMG : 'http://mobuz-mp.cdn.bcebos.com/matter/loading_figure@2x.png'" >
          </div>
          <div class="cellmessage">
            <div class="cellName">{{item.NAME}}</div>
            <div class="cellLine">
              <div class="cellSinger">{{item.SINGER}}</div>
              <div class="cellHot">
                <div class="hotIcon">
                  <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png">
                </div>
                <div class="hotCount">{{item.HOT || 0}}</div>
              </div>
              <div v-if="item.FAVORITE_ID  && item.FAVORITE_ID != null" class="cellCollect" @click.stop.prevent="removalScoreFromLibrary(item)">
                <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png">
                <!-- <img src="http://mobuz-mp.cdn.bcebos.com/matter/not_like@2x.png"> -->
              </div>
              <div v-else class="cellCollect"  @click.stop.prevent="enshrineScoreToLibrary(item)">
                <!-- <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png"> -->
                <img src="http://mobuz-mp.cdn.bcebos.com/matter/not_like@2x.png">
              </div>
            </div>
          </div>
          <div class="cellRight">
            <img src="http://mobuz-mp.cdn.bcebos.com/matter/details@2x.png">
          </div>
        </div>
      </div>
      <div class="resultNone" v-if="scoreData.length === 0 && searchStatus === 3">
        <img src="http://mobuz-mp.cdn.bcebos.com/matter/default_05@2x.png">
      </div>
    </div>
  </div>
</template>

<script>
import {searchMusicScore, appendScoreToCollect, removeScoreToCollect} from '@/config/api'
import {showMessager} from '@/config/wUtils'
import {localStorage} from '@/config/mUtils'
export default {
  data () {
    return {
      // 曲谱库数据
      scoreData: [],
      // 热门搜索数据
      hotsData: ['成都', '彩虹', '答案', '可乐', '借我', '戒烟', '等你下课', '斑马斑马'],
      // 历史搜索数据
      historyData: [],
      // 搜索 转态  0 未开始   1 加载中  2  加载完成   3 没数据
      searchStatus: 0,
      // 页码数
      page: 0,
      // 搜索文本
      searchText: '',  
      // 拉取方向  (1 -- 上拉  2  -- 下拉)
      pullDirection: 1,
      // 用户微信信息
      userInfo: {},
      // 允许搜索
      searchFlag: true,
      // 屏幕高度
      wHeight: 0
    }
  },
  mounted () {
      this.userInfo = wx.getStorageSync('userInfo')
      this.wHeight = wx.getSystemInfoSync().windowHeight
  },
  watch: {
    'searchText' () {
       this.page = 0
       this.searchFlag = true
    }
  },
  methods: {
    // 初始化 曲谱搜索界面
    initScoreSearch(){
      let self = this;
      console.log('初始化 曲谱详情界面')
      self.scoreData = []
      // 搜索 转态  0 未开始   1 加载中  2  加载完成   3 没数据
      self.searchStatus = 0
      // 页码数
      self.page = 0
      // 搜索文本
      self.searchText = ''
      // 允许搜索
      self.searchFlag = true
      // localStorage('scoreInfo', '黑暗骑士', 5)
      //  wx.removeStorageSync('scoreInfo')
      // 获取 历史推荐操作
      self.obtainHistoryOperate()
    },

    // 搜索 特定 曲谱
    async searchDefiniteScore(){
      wx.stopPullDownRefresh()
      let self = this;
      if (!self.searchText) {
        showMessager('请输入搜索内容')
        return;
      }
      // 下一页无数据，不继续请求
      if (!self.searchFlag) return false;
      // 存储 历史推荐 于本地
      localStorage('scoreInfo', self.searchText, 25)

      // 搜索 转态  0 未开始   1 加载中  2  加载完成   3 没数据
      self.searchStatus = 1
      wx.showNavigationBarLoading()
      wx.showLoading({title: '加载中'})
      let open_id = this.userInfo && this.userInfo['openId'] || ''
      let union_id = this.userInfo && this.userInfo['unionId'] || ''
      let searchInfo = await searchMusicScore(self.searchText, self.page,open_id, union_id)
      console.log(searchInfo, '.......searchInfo')
      if (searchInfo.status === 200) {
        if (searchInfo.data && searchInfo.data.length) {
          // 曲谱库数据
          self.scoreData = [...self.scoreData,...searchInfo.data];
          // 搜索 转态  0 未开始   1 加载中  2  加载完成   3 没数据
          self.searchStatus = 2
          // 下一页的页码
          self.page++;
          // 下次禁止加载 
          self.searchFlag = true
        } else {
          // 下次禁止加载 
          self.searchFlag = false
        }

        if (JSON.stringify(self.scoreData) === '[]') {
          // 搜索 转态  0 未开始   1 加载中  2  加载完成   3 没数据
          self.searchStatus = 3
        }
      }
      wx.hideNavigationBarLoading()
      wx.hideLoading()
    },



    // 清空 输入框操作
    emptyInputOperate() {
      let self = this;
      // 搜索文本
      self.searchText = ''
      // 页码数
      self.page = 0
      // 曲谱库数据
      self.scoreData = []
      // 搜索 转态  0 未开始   1 加载中  2  加载完成
      self.searchStatus = 0
      // 获取 历史推荐操作
      self.obtainHistoryOperate()
    },
    // 获取 历史推荐操作
    obtainHistoryOperate() {
      let self = this;
      console.log(wx.getStorageSync('scoreInfo'))
      if (wx.getStorageSync('scoreInfo')) {
        // 历史搜索数据
        self.historyData = wx.getStorageSync('scoreInfo')
      } else {
        // 历史搜索数据
        self.historyData = []
      }
      console.log(self.historyData, '....self.historyData')
    },
    // 清空 历史推荐操作
    emptyHistoryOperate() {
      let self = this;
      // 搜索文本
      self.searchText = ''
      // 页码数
      self.page = 0
      // 清空 本地 历史推荐
      wx.removeStorageSync('scoreInfo')
      // 获取 历史推荐操作
      self.obtainHistoryOperate()
    },
    // 选取推荐 操作
    selectPromptOperate(item) {
      let self = this;
      // 搜索文本
      self.searchText = item
      // 页码数
      self.page = 0
      // 搜索 特定 曲谱
      self.searchDefiniteScore()
    },
    // 收藏 图谱到曲谱库
    async enshrineScoreToLibrary(item) {
      let self = this;
      self.$set(item, 'FAVORITE_ID', 10086)
      // // 本地用户信息
      // const userInfo = await wx.getStorageSync('userInfo')
      let collectState = await appendScoreToCollect(item.ID, self.userInfo.openId, self.userInfo.unionId)
      console.log(collectState, item, '搜藏 图谱到曲谱库')
      // // 清空 本地 不收藏图谱
      // wx.removeStorageSync('collect_false')
      // // 存储 本地 收藏图谱
      // wx.setStorageSync('collect_true', item.ID);

      // 储存曲谱库 刷新标志
      wx.setStorageSync('score_load', true);
    },
    // 移除 图谱于曲谱库
    async removalScoreFromLibrary(item) {
      let self = this;
      self.$set(item, 'FAVORITE_ID', '')
      // // 本地用户信息
      // const userInfo = await wx.getStorageSync('userInfo')
      let collectState = await removeScoreToCollect(item.ID, self.userInfo.openId, self.userInfo.unionId)
      console.log(collectState, item, '移除 图谱于曲谱库')
      // // 清空 本地 收藏图谱
      // wx.removeStorageSync('collect_true')
      // // 存储 本地 不收藏图谱
      // wx.setStorageSync('collect_false', item.ID);

      // 储存曲谱库 刷新标志
      wx.setStorageSync('score_load', true);
    },
    // 跳转到 乐曲详情页
    goToScoreDetails(item){
        wx.navigateTo({
            url: '../scoreParticulars/main?score_id='+item.ID
        })
    },
  },
  // 上拉加载
  onReachBottom () {
    console.log('上拉加载')
    if (this.searchText) {
      // 获取 我的曲谱 列表
      this.searchDefiniteScore()
    }
  },
  onPullDownRefresh () {
    // 停止下拉动作
    wx.stopPullDownRefresh();
  },
  // 页面显示
  onShow () {
    let self = this;
    // 初始化 曲谱搜索界面
    self.initScoreSearch()
  }
}
</script>

<style lang="less" scoped>
.scoreSearch{
  width: 100%;
  min-height: 1334rpx;
  background: #f7f7f7;
  line-height: 1;
  .searchHeader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #f7f7f7;
    z-index: 9;
    .searchCircle{
      width: 686rpx;
      height: 48rpx;
      border: 2rpx solid #FE7A72;
      border-radius: 24rpx;
      margin: 0 auto;
      margin-top: 11.5rpx;
      margin-bottom: 0;
      box-sizing: border-box;
      .searchIcon{
        display: inline-block;
        vertical-align: middle;
        width: 37rpx;
        height: 35rpx;
        padding: 6rpx 16rpx 3rpx 10rpx;
        img{
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .searchInput{
        // width: 579rpx;
        display: inline-block;
        vertical-align: middle;
        width: 560rpx;
        height: 40rpx;
        // line-height: 40rpx;
        // margin-top: 4rpx;
        input{
          width: 100%;
          height: 40rpx;
          line-height: 40rpx;
          overflow: hidden;
          // min-height: 40rpx;
          display: block;

          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #333333;
          letter-spacing: 0.57rpx;
        }
        .inputPlaceholder{
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #999999;
          letter-spacing: 0.57rpx;
        }
      }
      .searchEmpty{
        // display: inline-block;
        // vertical-align: middle;
        // width: 26rpx;
        // height: 26rpx;
        // padding: 6rpx 20rpx 3rpx 14rpx;

        display:inline-block;
        vertical-align:middle;
        width:61rpx;
        padding: 6rpx 20rpx 3rpx 14rpx;
        box-sizing:border-box;

        img{
          width: 26rpx;
          height: 26rpx;
          display: block;
        }
      }
    }
  }
  .searchPrompt{
    padding-top: 59.5rpx;
    .hotsSearch{
      margin: 28rpx 42rpx 0 32rpx;
      .promptTitle{
        height: 37rpx;
        line-height: 37rpx;
        font-family: PingFangSC-Regular;
        font-size: 26rpx;
        color: #666666;
        letter-spacing: 0.57rpx;
        margin-bottom: 15rpx;
      }
      .promptList{
        margin-left: -20rpx;
        .promptCell{
          display: inline-block;
          vertical-align: middle;
          height: 37rpx;
          line-height: 37rpx;
          text-align: center;
          padding: 0 17rpx;
          margin-bottom: 14rpx;
          margin-left: 20rpx;
          background: #FE7A72;
          border-radius: 18rpx;
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          color: #FFFFFF;
          letter-spacing: 0.57rpx;
        }
      }
    }
    .historySearch{
      margin: 33rpx 42rpx 0 32rpx;
      position: relative;
      .promptTitle{
        height: 37rpx;
        line-height: 37rpx;
        font-family: PingFangSC-Regular;
        font-size: 26rpx;
        color: #666666;
        letter-spacing: 0.57rpx;
        margin-bottom: 14rpx;
      }
      .promptEmpty{
        position: absolute;
        top: 0;
        right: 14rpx;
        width: 26rpx;
        height: 27rpx;
        img{
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .promptList{
        margin-left: -20rpx;
        .promptCell{
          display: inline-block;
          vertical-align: middle;
          height: 37rpx;
          line-height: 37rpx;
          text-align: center;
          padding: 0 17rpx;
          margin-bottom: 14rpx;
          margin-left: 20rpx;
          background: #FE7A72;
          border-radius: 18rpx;
          font-family: PingFangSC-Regular;
          font-size: 26rpx;
          color: #FFFFFF;
          letter-spacing: 0.57rpx;
        }
      }
      .promptNone{
        font-family: PingFangSC-Regular;
        font-size: 26rpx;
        color: #999999;
        letter-spacing: 0.57rpx;
        text-align: center;
        height: 37rpx;
        line-height: 37rpx;
        padding-top: 11rpx;
      }
    }




    
  }
  .searchResult{
    padding-top: 59.5rpx;
    .resultList{
      margin: 0 auto;
      margin-top: 18rpx;
      width: 686rpx;
      background: #FFFFFF;
      box-shadow: 0 0 12rpx 2rpx rgba(223,223,223,0.30);
      border-radius: 10rpx;
      .resultCell{
        position: relative;
        width: 100%;
        height: 140rpx;
        margin: 0 auto;
        border-bottom: 1rpx solid #EAEAEA;
        box-sizing: border-box;
        &:last-child{
          border-bottom: none;
        }
        .cellImage{
          display: inline-block;
          vertical-align: top;
          width: 90rpx;
          height: 90rpx;
          margin: 25rpx 21rpx 0 32rpx;
          border-radius: 10rpx;
          overflow: hidden;
          img {
            vertical-align: top;
            width: 90rpx;
            height: 90rpx;
            display: block;
          }
        }
        .cellmessage{
          margin-top: 25rpx;
          display: inline-block;
          vertical-align: top;
          .cellName{
            height: 42rpx;
            line-height: 42rpx;
            font-family: PingFangSC-Regular;
            font-size: 30rpx;
            color: #333333;
            letter-spacing: 0.75rpx;
            margin-bottom: 10rpx;
          }
          .cellLine{
            .cellSinger{
              display: inline-block;
              vertical-align: middle;
              max-width: 154rpx;
              white-space: nowrap;
              overflow: hidden;
              /* 文本超出变省略号 */
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              height: 33rpx;
              line-height: 33rpx;

              font-family: PingFangSC-Regular;
              font-size: 24rpx;
              color: #999999;
              letter-spacing: 0.6rpx;
              text-align: center;
            }
            .cellHot{
              display: inline-block;
              vertical-align: middle;
              margin-left: 36rpx;
              .hotIcon{
                display: inline-block;
                vertical-align: middle;
                width: 23rpx;
                height: 27rpx;
                line-height: 27rpx;
                margin-right: 9rpx;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .hotCount{
                display: inline-block;
                vertical-align: middle;

                font-family: PingFangSC-Regular;
                font-size: 24rpx;
                color: #666666;

                max-width: 154rpx;
                white-space: nowrap;
                overflow: hidden;
                /* 文本超出变省略号 */
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
              }
            }
            .cellCollect{
              display: inline-block;
              vertical-align: middle;
              padding: 10rpx 9rpx;
              width: 31rpx;
              height: 27rpx;
              margin-left: 27rpx;
              margin-bottom: -4rpx;
              img{
                display: block;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .cellRight{
          position: absolute;
          width: 14rpx;
          height: 28rpx;
          top: 57.3rpx;
          right: 30.2rpx;
          img{
            width: 100%;
            height: 100%;
            display: block;
          }
        }        
      }
    }
    .resultNone{
      width: 430rpx;
      height: 354rpx;
      margin: 46rpx auto;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
